<template>
  <div class="login">
    <div class="login-bar">
      <svg width='500' height='45'>
        <polygon points="0 0,245 0,265 22.5,245 45,0 45" style="fill:#fff;" :class="{error:!checkResult.phone}"/>
        <polygon points="255 0,500 0,500 45,255 45,275 22.5" style="fill:#fff;" :class="{error:!checkResult.code}"/>
      </svg>
      <input type="text" name="code" placeholder="验证码" v-model="code" maxlength="6" @input="codeCheck">
      <input type="text" name="phone" placeholder="请输入手机号" v-model="phone" maxlength="11" @input="phoneCheck">
      <p class="btn" @click="login">GO</p>
      <transition name="fade">
        <span class="send-code" v-if="isSendShow" @click="sendCode" v-html="codeText"></span>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  props: ["logined"],
  data(){
    return {
      phone:'',
      code:'',
      timer:{},
      secodes: 60,
      isSendShow: false,
      canResendCode: true,
      codeText:'发送验证码',
      onceChecked: false,
      checkResult: {
        phone: true,
        code: true
      },
      user: {
        account: "",
        psw: "",
        username: ""
      }
    }
  },
  mounted: function() {
  },
  methods: {
    numberFilter(val){
      val = val.replace(/[^\d.]/g,"").replace(/\.{2,}/g,".")
      if (val.indexOf('.') !== val.lastIndexOf('.')) {
         val = val.substring(0,val.lastIndexOf('.'))
      }
      return val
    },
    sendCode(){
      if (!this.canResendCode) {
        return
      }
      this.getCode()
      this.canResendCode = false
      this.codeText = `Resend in ${this.secodes} s`
      this.timer = setInterval(()=>{
        if (this.secodes > 0) {
          this.secodes--
          this.codeText = `Resend in ${this.secodes} s`
        }else {
          this.codeText = '&nbsp;&nbsp; 重新发送'
          this.canResendCode = true
          clearInterval(this.timer)
          this.secodes = 60
        }
      },1000)
    },
    getCode () {
      this.$axios.post(`http://sms.usts.top/sms/sendCode?phone=${this.phone}`)
    },
    async login () {
      this.onceChecked = true
      if (!this.phoneCheck()) return
      if (!this.codeCheck()) return
      let result = await this.$axios.post(`http://sms.usts.top/sms/verify?phone=${this.phone}&code=${this.code}`)
      if (result.meta.errorCode == "1101") {
          this.$alert("账号或密码错误~", "Warning", {
            confirmButtonText: "确定",
            callback: action => {
              // $("input").val("");
            }
          })            
      } else {
        this.user.username = data.data.name;
        this.user.token = data.data.token;
        this.$store.commit("login", this.user);
        // this.$store.state.user = this.user
        // 登录成功后
        localStorage.setItem('user',JSON.stringify(this.user))
        this.$message({
          type: "success",
          message: "欢迎回来！" + data.data.name
        });
      }
    },
    phoneCheck () {
      if (!this.onceChecked) return
      if (this.phone === '' || this.phone.toString().length !== 11) {
        console.log('error')
        this.checkResult.phone = false
        return false
      }
      this.checkResult.phone = true
      return true
    },
    codeCheck () {
      if (!this.onceChecked) return
      if (this.code === '' || this.code.toString().length !== 6) {
        this.checkResult.code = false
        return false
      }
      this.checkResult.code = true
      return true
    }
  },
  watch: {
    'phone':function(){
      this.phone = this.phone.replace(/[^\d]/g,"")
      if (this.phone.toString().length === 11) {
        this.isSendShow = true
      }else {
        this.isSendShow = false
      }
      
    },
    'code': function(){
      this.code = this.code.replace(/[^\d]/g,"")
    }
  }
};
</script>

<style lang='less'>
body {
  background: url(../../assets/ali.jpg);
  background-size: 100% 100%;
  height: 100%;
}
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-bar {
  width: 560px;
  height:45px;
  margin-top: 120px;
  display: flex;
  position: relative;
  .btn {
    box-sizing: content-box;
    height: 46px;
    background: #373658;
    width: 60px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    font-size: 20px;
  }
  input {
    position: absolute;
    top: 2px;
    height: 41px;
    width: 240px;
    font-size: 16px;
    text-indent: 15px;
    color: #666;
    border: none;
    outline: none;
    transition: all 0.3s;
    &:focus {
      text-shadow: #4567ae;
    }
  }
  input[name=phone] {
    left: 4px;
  }
  input[name=code] {
    right: 70px;
    width: 210px;
  }
  .send-code {
    position: absolute;
    left: 165px;
    color: #4567ae;
    height: 45px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
}
.error {
  stroke: #d66b6b;
}
polygon {
  stroke: #fff;
  transition: all 0.3s;
  stroke-width: 3px;
}
</style>
